<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AP 위치 측정 by Chaehyun Lee</title>
<script type="text/javascript"
src="http://map.naver.com/js/naverMap.naver?key=954c189d955a835c15a8b516181d53eb"></script>
<style type="text/css">
#waiting{
	position:absolute;
	top:300px;
	left:300px;
	visibility:hidden;
	background-color:white;
	z-index:100;
}
#totalNum{
	position:absolute;
	top:0px;
	left:0px;
}
#infoWin{
	position:absolute;
	top:0px;
	left:100px;
	background-color:white;
	margin:0px 10px 10px 10px;
	z-index:100;
}
#infoWin2{
	position:absolute;
	top:0px;
	left:400px;
	background-color:white;
	margin:0px 10px 10px 10px;
	z-index:100;
}

#rulerButton{
	position:absolute;
	top:0px;
	left:500px;
	width:50px;
	height:50px;
	background-color:white;
	z-index:100;
}
.distance{
	background-color:white;
}


</style>

</head>
<body>
<div id=waiting><img src=http://ozs.kr/map/img/wait.gif></div>
<div id="map"></div>
<div id="display"></div>
<div id="infoWin"></div>
<div id="infoWin2"></div>
<div id="minAPNumDiv">최소 AP 검출 지역 : 
<select name=minAPNum id=minAPNum onChange='changeMinAPNum()'>
<option value=1>1 개</option>
<option value=2>2 개</option>
<option value=3>3 개</option>
<option value=4>4 개</option>
<option value=5>5 개</option>
<option value=6>6 개</option>
<option value=7>7 개</option>
<option value=8>8 개</option>
<option value=9>9 개</option>
<option value=10>10 개</option>
<option value=11>11 개</option>
<option value=12>12 개</option>
<option value=13>13 개</option>
<option value=14>14 개</option>
<option value=15>15 개</option>
<option value=16>16 개</option>
<option value=17>17 개</option>
<option value=18>18 개</option>
<option value=19>19 개</option>
<option value=20>20 개</option>
<option value=21>21 개</option>
<option value=22>22 개</option>
<option value=23>23 개</option>
<option value=24>24 개</option>
<option value=25>25 개</option>
<option value=26>26 개</option>
<option value=27>27 개</option>
<option value=28>28 개</option>
<option value=29>29 개</option>
</select>
<button id=rulerButton onclick=changeRulerState()>Ruler</button>
<?
include "../db_config.php";
$sql = "select * from wps_ap_detection_log order by logId desc";
$result = mysql_query($sql);
$d = mysql_fetch_array($result);
?>
<script type="text/javascript">
var mapWidth = 800;
var mapHeight = 600;
var mapObj = new NMap(document.getElementById('map'),mapWidth,mapHeight);
var center = new NLatLng(<?=$d[latitude]?>	,<?=$d[longitude]?>);
//var center = new NLatLng(37.5790333, 126.8894583);

var tm128 = new NPoint(321033,529749);
var latlng;

/*
 * 경기도성남시정자1동25-1의 위치로 이동합니다. 레벨은 1로 지정하였습니다.
 * 인덱스맵과 확대/축소 컨트롤러를 등록하고 마우스 줌인/아웃을 활성화 하였습니다.
 */
mapObj.setCenterAndZoom(center, 0);
mapObj.addControl(new NIndexMap());
mapObj.addControl(new NZoomControl());
mapObj.enableWheelZoom();

/*
var p = new NPoint(349477489,149517529);
var mark = new NMark();
p = mark.coordconv.fromPointToTM128(p);
alert(p);
*/

/*
 * 정자1동25-1의 tm128 좌표를 위경도로 변경하여 display div에 표시하도록 하였습니다.
 * 위경도를 tm128 좌표로 변경하려면 fromLatLngToTM128 메소드를 사용해야 합니다.
 */            
function transFromTM128ToLatLng()
{
latlng = mapObj.fromTM128ToLatLng(tm128);
document.getElementById("display").innerHTML = latlng;
}
/*
 * NPoint가 사용되는 곳이면 NLatLng을 대신해서 사용할 수 있습니다.
 */            
function moveLatLng()
{
mapObj.setCenter(latlng);
}
/*
 * NMark도 마찬가지로 tm128 대신 위경도를 사용하여 아이콘을 표시하였습니다.
 */            
function showMark()
{
var mark = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));
	mapObj.addOverlay(mark);
}

/*
 * NLatLng에 위경도가 아닌 tm128 좌표를 넣게되면 예상치 못한 결과가 나오게 됩니다.
 * 카텍 좌표는 NPoint, 위경도 좌표는 NLatLng를 사용해야 함을 잊지마세요.
 * 그리고 NLatLng는 (lat, lng)를 아규먼트로 받습니다.
 * 위도(y), 경도(x)의 순으로 아규먼트를 넣어야 합니다. 이점도 주의하세요.
 */            
	function moveError()
{
	var errPoint = new NLatLng(tm128.y, tm128.x);
	mapObj.setCenter(errPoint)
}

function addmarker(x, y, i, snr, viewOnPoint)
{
	var n1, n2;

	var pt_img = "http://ozs.kr/lbs/point.png";
	var base_img = "http://static.naver.com/maps/mymap/ico_traffic_";
	n1 = new NLatLng(x, y);

	n2 = new NLatLng(x, y+0.00005);

	var size = new NSize(21, 18);
	var offset = new NSize(10, 18);

	var size2 = new NSize(7, 8);
	var pt = new NMark(n1, new NIcon(pt_img, size2));
	mapObj.addOverlay(pt);

	if(viewOnPoint != undefined)
	{
		var infowin = new NInfoWindow();
		//window.console.log(snr);
		infowin.set(n2, "<div style='width:20px;height:20px;'>"+snr+"</div>");
		//infowin.showWindow();
		infowin.setOpacity(0.5);
		mapObj.addOverlay(infowin);

		infowin.showWindow();

		NEvent.addListener(pt, "mouseover", function d(){showList2(snr);});
	}
	else
	{
		var iconUrl = "http://static.naver.com/maps/ico_spot"+i+".gif";
		var marker = new NMark(n1, new NIcon(iconUrl, size, offset));
		mapObj.addOverlay(marker);
		NEvent.addListener(marker, "click", function d(){showList(snr);});
	}




//	NEvent.addListener(marker, "mouseover", function d(){showList(snr);});
//	NEvent.addListener(marker, "mouseout", hideList);

	return;
}
function showList2(list)
{
	document.getElementById("infoWin2").innerHTML = list;
}
function showList(list)
{
	document.getElementById("infoWin").innerHTML = list;
}
function hideList()
{
	//document.getElementById("infoWin").style.visibility = "hidden";
	document.getElementById("infoWin").innerHTML = "";
}

function getAPRawData(bssid)
{
	var xmlhttp = new NXmlhttp();
	xmlhttp.setType(0);
	var url = "getAPRawData.php?bssid="+bssid;
	xmlhttp.loadhttp(url, showAPRawData); 
}
	
function showAPRawData(res)
{
	eval("var s = " + res +";");
	document.getElementById('totalNum').innerHTML = "총 AP : "+s.totalNum + "개";
	mapObj.clearOverlays();

	//boundary를 구하기 위해
	var line = new NPolyline;

	for(var i in s.Points)
	{
		var node = s.Points[i];
		var p = new NLatLng(node.latitude, node.longitude);
		line.addPoints(p);
		addmarker(node.latitude, node.longitude, 0, node.snr+"|"+node.signal, 1);
		//addmarker(node.lat, node.lng, 0, "", 1);
	}
	var b = line.getBound();
	mapObj.setBound(b[0], b[1], b[2], b[3]);

	document.getElementById('waiting').style.visibility = "hidden";

}

function showAPPoints(res)
{
	eval("var s = " + res +";");
	document.getElementById('totalNum').innerHTML = "총 AP : "+s.totalNum + "개";
	mapObj.clearOverlays();
	for(var i in s.Points)
	{
		var node = s.Points[i];
		addmarker(node.lat, node.lng, node.no, node.lists);
	}
	document.getElementById('waiting').style.visibility = "hidden";
}
//ruler 관련 코드
var rulerStatus = 0;
//최소 AP 개수
var minAPNum = 1;

NEvent.addListener(mapObj, "click", rulerCheck);
var pt1, pt2;
function changeMinAPNum()
{
	var obj = document.getElementById('minAPNum');
	minAPNum = obj.value;

	getAPPoints(mapObj.getBound());
}
function rulerCheck(p)
{
	var iconURL = "img/point_blue.png";
	var size = new NSize(7, 8);
	
	if(rulerStatus == 1)
	{
		var marker = new NMark(p, new NIcon(iconURL, size)); 
		mapObj.addOverlay(marker);
		pt1 = p;
		rulerStatus++;
	}
	else if(rulerStatus == 2)
	{
		var marker = new NMark(p, new NIcon(iconURL, size)); 
		mapObj.addOverlay(marker);
		pt2 = p;
		rulerStatus = 1;

		//polyline
		var line = new NPolyline();
		line.addPoints(pt1, pt2);
		line.setColor('#0000FF');
		mapObj.addOverlay(line);

		//거리측정
		var dis = pt1.distanceFrom(pt2);

		var infowin = new NInfoWindow();
		infowin.set(p, '<div class=distance>'+dis+' m</div>');
		infowin.setOpacity(1);
		mapObj.addOverlay(infowin);
		infowin.showWindow();

		//window.console.log(dis);
		//document.getElementById('logTime').innerHTML += "<br>\nDistance : "+dis+" m";

	}
}
function changeRulerState()
{
	if(rulerStatus == 0)
	{
		document.getElementById('rulerButton').innerHTML = "Ruler on";
		rulerStatus = 1;
	}
	else
	{
		document.getElementById('rulerButton').innerHTML = "Ruler off";
		rulerStatus = 0;
	}
}
//ruler 관련 코드 끝

function getAPPoints2(l1, l2)
{
	getAPPoints(mapObj.getBound());
}
function getAPPoints(b)
{
	//ruler가 동작 중일 때는 동작 안함
	if(rulerStatus != 0)
		return;
	var lt = mapObj.fromTM128ToLatLng(new NTM128(b[0], b[1]));
	var rb = mapObj.fromTM128ToLatLng(new NTM128(b[2], b[3]));
	var obj = document.getElementById('waiting');
	obj.style.visibility = "visible";
	var xmlhttp = new NXmlhttp();
	xmlhttp.setType(0);
	var url = "getAPs.php?b1="+lt.lat()+"&b2="+lt.lng()+"&logSelect="+logSelect;
	url = url + "&b3="+rb.lat() +"&b4="+rb.lng();
	url = url + "&sourceNum="+minAPNum;
	//window.console.log(url);
	xmlhttp.loadhttp(url, showAPPoints); 
}
getAPPoints(mapObj.getBound());
NEvent.addListener(mapObj, "endDrag", getAPPoints);
NEvent.addListener(mapObj, "zoom", getAPPoints2);
var logSelect = 1;
function loadLog()
{
	var obj = document.getElementById('log');
	logSelect = obj.value;
	getAPPoints(mapObj.getBound());
}


</script>
<!--
<button onclick=addClick()>click event등록</button>
<button onclick=removeClick()>click event제거</button>
-->
<script type="text/javascript"">
<!--
/*
var mapObj = new NMap(document.getElementById('mapContainer'),300,300);
mapObj.setCenterAndZoom(new NPoint(321198,529730),3);
var regFlag = false;

function addClick() {
	if (!regFlag) {
		NEvent.addListener(mapObj,"mousedown",clicked);
		regFlag  = true;
	}
}

function removeClick() {
	NEvent.removeListener(mapObj,"click",clicked);
	regFlag  = false;
}

function clicked(pos) {
	alert(pos+" clicked");
}
*/
//-->
</script>

<div id=totalNum></div>
</body>
</html>

				
